<template>
  <div>
    <!-- 查询模块 -->
    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="工单编号" prop="taskCode">
          <el-input v-model="formInline.taskCode" clearable placeholder="请输入" />
        </el-form-item>
        <el-form-item label="工单状态" prop="status">
          <el-select v-model="formInline.status" clearable placeholder="请选择">
            <el-option
              v-for="item in statusList"
              :key="item.statusId"
              :label="item.statusName"
              :value="item.statusId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表格模块 -->
    <ShowTable :params.sync="params" />

    <!-- 新增弹框 -->
    <AddDialog />

    <!-- 详情弹框 -->
    <DetailDialog />
  </div>
</template>

<script>
import { getStatusList } from '@/api/table'
import ShowTable from './components/ShowTable.vue'
import DetailDialog from './components/DetailDialog.vue'
import AddDialog from './components/AddDialog.vue'
export default {
  name: 'MainTenance',
  components: {
    ShowTable,
    DetailDialog,
    AddDialog
  },
  data() {
    return {
      params: {
        pageIndex: 1,
        pageSize: 10,
        isRepair: true
      },
      formInline: {},
      statusList: []
    }
  },
  created() {
    // 拿数据
    this.getStatus()
  },
  methods: {
    async getStatus() {
      try {
        const res = await getStatusList()
        // console.log(res)
        this.statusList = res
      } catch (error) {
        throw new Error(error)
      }
    },
    search() {
      this.params = { ...this.params, ...this.formInline }
      // 更新数据
      this.$store.dispatch('maintenance/getTasks', this.params)
    }
  }
}
</script>

